<template>
  <div :class="clazz">
    <div class="title_logo"></div>
    <div class="title_center"></div>
    <div class="title_right">
      <div class="title_weather_time">
        <div class="title_weather_date">{{ currentDate }}</div>
        <div class="title_weather_week">{{ currentDayOfWeek }} {{ currentHalfDay }} {{ currentHm }}</div>
      </div>
      <!-- <div class="title_weather_temperature">
        <div class="title_weather-flex">
          <div class="weather_icon"></div>
          <div class="weather_p">32 优</div>
        </div>
        <div class="title_weather-flex">
          <div class="weather_p1">25°C</div>
          <div class="weather_p2"> 22/29°C</div>
        </div>
      </div> -->
      <div class="title_buttons">
        <div class="title_button title_more" @click="clickMoreLayer()"
             v-if="props.originName === 'parking' || props.originName === 'sale' || props.originName === 'traffic' || props.originName === 'headquarters' || props.originName === 'client'"></div>
        <div class="title_button title_expand" @click="toggleFullScreen()"></div>
        <div class="title_button title_close" @click="closeWindow()"></div>
      </div>
    </div>
  </div>
  <parking-more-layer :showParkingMoreLayer="showParkingMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></parking-more-layer>
  <sale-more-layer :showSaleMoreLayer="showSaleMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></sale-more-layer>
  <traffic-more-layer :showTrafficMoreLayer="showTrafficMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></traffic-more-layer>
  <headquarters-more-layer :showHeadquartersMoreLayer="showHeadquartersMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></headquarters-more-layer>
  <client-more-layer :showClientMoreLayer="showClientMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></client-more-layer>
</template>
<script setup>
import {ref} from "vue";
import router from "../../router/index.js";
import ParkingMoreLayer from "./parking_more/parkingMoreLayer.vue";
import SaleMoreLayer from "./sale_more/saleMoreLayer.vue";
import TrafficMoreLayer from "./traffic_more/trafficMoreLayer.vue";
import HeadquartersMoreLayer from "./headquarters_more/headquartersMoreLayer.vue";
import ClientMoreLayer from "./client_more/clientMoreLayer.vue";

const props = defineProps({
  index: Number,
  originName : String,
  title : String
})

const clazz = ref("title_background fwqszhglpt ");
if (props.originName === 'basePanel2'){
  clazz.value += props.originName
}

const showParkingMoreLayer = ref(false);
const showSaleMoreLayer = ref(false);
const showTrafficMoreLayer = ref(false);
const showHeadquartersMoreLayer = ref(false);
const showClientMoreLayer = ref(false);
const clickMoreLayer = ()=>{
  if (props.originName === 'parking'){
    showParkingMoreLayer.value = true;
  }else if (props.originName === 'sale'){
    showSaleMoreLayer.value = true;
  }else if (props.originName === 'traffic'){
    showTrafficMoreLayer.value = true;
  }else if (props.originName === 'headquarters'){
    showHeadquartersMoreLayer.value = true;
  }else if (props.originName === 'basePanel2'){

  }else if (props.originName === 'client'){
    showClientMoreLayer.value = true;
  }
}
const closeMoreLayers = function (args){
  if (args === 'parking'){
    showParkingMoreLayer.value = false;
  }else if (props.originName === 'sale') {
    showSaleMoreLayer.value = false;
  }else if (props.originName === 'traffic'){
    showTrafficMoreLayer.value = false;
  }else if (props.originName === 'headquarters'){
    showHeadquartersMoreLayer.value = false;
  }else if (props.originName === 'client'){
    showClientMoreLayer.value = false;
  }
}
const showMoreLayers = function (args){
  if (args === 'parking'){
    showParkingMoreLayer.value = true;
  }else if (props.originName === 'sale') {
    showSaleMoreLayer.value = true;
  }else if (props.originName === 'traffic'){
    showTrafficMoreLayer.value = true;
  }else if (props.originName === 'headquarters'){
    showHeadquartersMoreLayer.value = true;
  }else if (props.originName === 'client'){
    showClientMoreLayer.value = true;
  }
}

const toRouter = (url) => {
  router.push({name: url})
}
const currentDate = ref('');
const currentHm = ref('');
const currentDayOfWeek = ref('');
const currentHalfDay = ref('');
function getCurrentDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = padNumber(now.getMonth() + 1);
    const day = padNumber(now.getDate());
    const hours = now.getHours();
    const minutes = padNumber(now.getMinutes());
    const seconds = padNumber(now.getSeconds());
    currentHm.value = hours+":"+minutes
    currentDate.value = `${year}-${month}-${day}`;
    const dayOfWeek = now.getDay();
    currentDayOfWeek.value = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][dayOfWeek - 1];
    currentHalfDay.value = hours < 12 ? '上午' : '下午';
}
function padNumber(num) {
      return num < 10 ? '0' + num : num;
}
let timer = setInterval(async () => {

  getCurrentDateTime()
// await getCurrentMonthWtElct(0)
// await getCurrentMonthWtElct(1)
}, 1000)

const isFullScreen = ref(false);
const toggleFullScreen = function (){
  if (!document.fullscreenElement && !isFullScreen.value) {
    // 进入全屏
    document.documentElement.requestFullscreen().then(() => {
      isFullScreen.value = true;
    });
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen().then(() => {
        isFullScreen.value = false;
      });
    }
  }
}

const closeWindow = function (){
  if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
	
  var userAgent = navigator.userAgent;
  if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
      location.href = "about:blank";
  } else {
      window.opener = null;
      window.open('', '_self');
  }
  window.close();
}

</script>
<style scoped>
.title_center {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 3vh;
  padding-top: 1.2vh;
  font-family: STHeiti,serif;
  color: #00FFFF;
  letter-spacing: 0.8vh;
  text-shadow: 1px 1px 6px #00EAFF;
}
.title_right {
  position: absolute;
  right: 1vh;
  display: flex;
  top: 2.4vh;

  .title_weather_time{
    padding-right: 12px;
    /* border-right: 2px solid #ccc; */
    .title_weather_date{
      text-align: right;
    }
    .title_weather_week{
      font-size: 1.5vh;
    }
  }

  .title_weather_temperature{
    padding-right: 5vh;
    .title_weather-flex{
      display: flex;
      text-align: center;
      width: 80px;
      justify-content: center;
      .weather_icon{
        background: url("../../assets/img/public/sun.png") no-repeat;
        width: 12px;
        height: 12px;
        background-size: 100% 100%;
      }
      .weather_p{
        font-size: 14px;
        background: #35CB9C;
        color: white;
        border-radius: 6px;
        padding: 1px 4px;
        margin-left: 15px;
      }
      .weather_p1{
        font-size: 14px;
        width: 100%;
      }
      .weather_p2{
        font-size: 12px;
        width: 100%;
      }
    }

  }

  .title_buttons{
    display: flex;
    padding-left: 15vh;
    padding-right: 2vh;
    .title_button{
      width: 24px;
      height: 24px;
      margin-left: 1vh;
      position: relative;
      top: 2.8vh;
      cursor: pointer;
    }
    .title_more{
      background-image: url("../../assets/img/public/more.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .title_expand{
      background-image: url("../../assets/img/public/expand.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .title_close{
      background-image: url("../../assets/img/public/close.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

}

.title_logo {
  position: absolute;
  top: 2vh;
  left: 19vh;
  width: 192px;
  height: 3vh;
  background: url("../../assets/img/public/logo.png") no-repeat center;
  background-size: 100% 100%;
}

.title_background {
  width: 100%;
  height: 8vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/public/头部.png") no-repeat;
  background-size: 100%  100% ;
}

.fwqszhglpt{
  background: url("../../assets/img/header-bg/服务区数字化.png") no-repeat;
}

.basePanel2{
  background: url("../../assets/img/basePanel2/head2.png") no-repeat !important;
}
</style>
